<template>
  <div>
    <!-- 单文件上传 -->
    <!-- <input type="file" @change="changeFile"> -->
    <!-- 多文件上传 -->
    <!-- <input type="file" @change="changeMultipleFile" multiple /> -->
    <!-- 切片上传 -->
    <input type="file" @change="cutSliceUpload"  />
    <div>{{present}}%</div>
    <!-- <button @click="submit">上传</button> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
const fileLists = ref([]);
const present = ref(0);

// 单文件上传;
// const changeFile = (e) => {
//   let file = e.target.files[0];
//   // file 和 blob 格式之间互转
//   let blob = new Blob([file]);
//   // 截取切片
//   let _sliceBlob = blob.slice(0, 100000);
//   let _sliceFile = new File([_sliceBlob], "upload.img");
//   // FileReader 读取
//   let fr = new FileReader();
//   // 将file 或者 blob 转化成 base64 或者 text 格式
//   fr.readAsDataURL(_sliceFile);
//   // fr.readAsText(_sliceFile)
//   fr.onload = function () {
//     // fr的读取操作是异步的，所以要想获取读取后的内容必须在 onload 方法中
//   };
// };

// 多文件上传
// const changeMultipleFile = (e) => {
//     fileLists.value.push(...e.target.files)
// }

const upload = (file) => {
    const _formData = new FormData()
    // _formData.append(file.name + 'file', file)
    _formData.append('file', file)
    fetch('/api/upload-single', {
        method: 'post',
        body: _formData
    })
}
// const submit = () => {
//     fileLists.value.map(file => {
//         upload(file)
//     })
// }

// 切片上传
const cutSliceUpload = async (e) => {
    let file = e.target.files[0]
    let every_size = 2 * 1024 * 1024
    let cur_size = 0
    let total_size = file.size
    while(cur_size < total_size) {
        let slice_file = file.slice(cur_size, cur_size + every_size)
        await upload(slice_file)
        present.value = Math.max(cur_size/total_size * 100, 100)
        cur_size += every_size
    }

    // upload(file)
}
</script>

<style lang="less" scoped></style>
